<template>
  <div class="historyContainer">
    <el-image
      src="http://file.chat.navrise.com/file/demo/usBanner2.png"
      fit="cover"
      style="height: 33.33rem"
    >
    </el-image>
    <!--    <div class="historyContent">-->
    <!--      <div class="line"></div>-->
    <!--      <div class="yearCircular">-->
    <!--        <div class="circularD">-->
    <!--          <span>2019</span>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="mothCircular">-->
    <!--        <div class="monthText monthTextZ">-->
    <!--          <p>引入赛伯乐战略投资</p>-->
    <!--          <h5>9月</h5>-->
    <!--        </div>-->
    <!--        <div class="circularS">-->
    <!--          <span></span>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="yearCircular">-->
    <!--        <div class="circularD">-->
    <!--          <span>2018</span>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="mothCircular">-->
    <!--        <div class="monthText monthTextY">-->
    <!--          <h5>12月</h5>-->
    <!--          <p>推出跨境电商营销业务</p>-->
    <!--        </div>-->
    <!--        <div class="circularS">-->
    <!--          <span></span>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="mothCircular">-->
    <!--        <div class="monthText monthTextZ">-->
    <!--          <p>与上市公司骅威文化，谋求资本化</p>-->
    <!--          <h5>9月</h5>-->
    <!--        </div>-->
    <!--        <div class="circularS">-->
    <!--          <span></span>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="mothCircular">-->
    <!--        <div class="monthText monthTextY">-->
    <!--          <h5>7月</h5>-->
    <!--          <p>成立城觅，发力短视频营销服务</p>-->
    <!--        </div>-->
    <!--        <div class="circularS">-->
    <!--          <span></span>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="yearCircular">-->
    <!--        <div class="circularD">-->
    <!--          <span>2017</span>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="mothCircular">-->
    <!--        <div class="monthText monthTextZ">-->
    <!--          <p>成立微赞，积极探索城市新媒体营销</p>-->
    <!--          <h5>11月</h5>-->
    <!--        </div>-->
    <!--        <div class="circularS">-->
    <!--          <span></span>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="mothCircular">-->
    <!--        <div class="monthText monthTextY">-->
    <!--          <h5>10月</h5>-->
    <!--          <p>引进上市公司实达集团</p>-->
    <!--        </div>-->
    <!--        <div class="circularS">-->
    <!--          <span></span>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="mothCircular">-->
    <!--        <div class="monthText monthTextZ">-->
    <!--          <p>成立香港乐汇，布局海外市场</p>-->
    <!--          <h5>6月</h5>-->
    <!--        </div>-->
    <!--        <div class="circularS">-->
    <!--          <span></span>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="mothCircular">-->
    <!--        <div class="monthText monthTextY">-->
    <!--          <h5>1月</h5>-->
    <!--          <p>“旭米广告平台”斩获2016年度创新应用/平台</p>-->
    <!--        </div>-->
    <!--        <div class="circularS">-->
    <!--          <span></span>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="yearCircular">-->
    <!--        <div class="circularD">-->
    <!--          <span>2016</span>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="mothCircular">-->
    <!--        <div class="monthText monthTextZ">-->
    <!--          <p>代理发行业务拓展，SDK智能推广服务</p>-->
    <!--          <h5>4月</h5>-->
    <!--        </div>-->
    <!--        <div class="circularS">-->
    <!--          <span></span>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="yearCircular">-->
    <!--        <div class="circularD">-->
    <!--          <span>2014</span>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="mothCircular">-->
    <!--        <div class="monthText monthTextY">-->
    <!--          <h5>9月</h5>-->
    <!--          <p>公司注册成立</p>-->
    <!--        </div>-->
    <!--        <div class="circularS">-->
    <!--          <span></span>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="historyContent">
      <div class="line"></div>
      <div v-for="(item,index) in data" class="yearCircular" :style="index === 3 || index === 6
      || index === 8 || index === 11 || index === 12?'margin-top:8.33rem':''">
        <h5>{{item.year}}</h5>
        <div class="circular" :class="item.year?'':mothClass">
          <span></span>
        </div>
        <p class="spanP">{{item.content}}</p>
      </div>
    </div>

  </div>
</template>

<script>
  // import historyBannerUrl from '@/assets/img/aboutUs/usBanner2.png'
  export default {
    name: "history",
    data(){
        return{
          // historyBannerUrl:historyBannerUrl,
          mothClass:'mothClass',
          data:[
            {
              year:'2020',
              content:'2020年3月，与浙报集团共同成立浙商新媒体联盟'
            },
            {
              year:'',
              content:'2020年3月，落地印尼电商网红人才培养基地'
            },
            {
              year:'',
              content:'2020年1月，旭航战略升级:全球领先的区域新媒体综合服务商”,深化与区域政府、主流媒体全方位合作。'
            },
            {
              year:'2019',
              content:'2019年12月，签署六方战略合作协议，打造数字营销产教融合服务平台（赛伯乐投资集团、北京产教融合科研院、清图数据、红杉树信息、中高国际）'
            },
            {
              year:'',
              content:'2019年11月，签署JNE合作协议'
            },
            {
              year:'',
              content:'2019年9月，引入赛伯乐战略投资'
            },
            {
              year:'2018',
              content:'2018年12月，推出跨境电商营销业务'
            },
            {
              year:'',
              content:'2018年7月，成立城觅，发力短视频营销服务'
            },
            {
              year:'2017',
              content:'2017年11月，成立微赞，积极探索城市新媒体营销'
            },
            {
              year:'',
              content:'2017年6月，成立香港乐汇，布局海外市场'
            },
            {
              year:'',
              content:'2017年1月，“旭米广告平台”斩获2016年度创新应用/平台'
            },
            {
              year:'2016',
              content:'2016年4月，代理发行业务拓展，SDK智能推广服务'
            },
            {
              year:'2014',
              content:'2014年9月，公司注册成立'
            },
          ]
        }
    },
    methods:{

    }
  }
</script>

<style scoped lang="scss">
.historyContainer{
  width: 100%;
  .el-image{
    width: 100%;
  }
  .historyContent{
    width: 76rem;
    margin: 6.66rem auto 13.75rem;
    position: relative;
    overflow: hidden;
    .line{
      width: .16rem;
      height: 103rem;
      position: absolute;
      background-color: #e0e0e0;
      /*top: 4.83rem;*/
      left:11.045rem;
      right:0;
      top:1rem;
      bottom:0;
    }
    .yearCircular{
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: baseline;
      h5,p{
        /*font-family: 'fontMedium';*/
        margin: 0;
      }
      h5{
        font-weight: 500;
        font-size: 2rem;
        line-height: 2rem;
        color: #333333;
      }
      .circular{
        padding: 0 6.5rem 0 5.9rem;
        span{
          width: 1.0833rem;
          height: 1.0833rem;
          background-color: #e0e0e0;
          border: 1px solid #e0e0e0;
          border-radius: 100%;
          display: inline-block;
        }
      }
      .mothClass{
        padding: 0 6.5rem  0 10.5rem;
      }
      .spanP{
        font-size: 1.25rem;
        line-height: 2rem;
        color: #777777;
        text-align: left;
      }
    }
    .yearCircular+.yearCircular{
      margin-top: 4.5833rem;
    }
    /*.yearCircular{*/
    /*  width: 100%;*/
    /*  display: flex;*/
    /*  justify-content: center;*/
    /*  align-items: center;*/
    /*  margin-bottom: 4rem;*/
    /*  .circularD{*/
    /*    width: 9.66rem;*/
    /*    height: 9.66rem;*/
    /*    border: 0.166rem solid #0067fd;*/
    /*    border-radius: 100%;*/
    /*    display: flex;*/
    /*    justify-content: center;*/
    /*    align-items: center;*/
    /*    span{*/
    /*      font-family: 'fontMedium';*/
    /*      width: 7.5rem;*/
    /*      height: 7.5rem;*/
    /*      background-color: #0067fd;*/
    /*      border-radius: 100%;*/
    /*      font-size: 2rem;*/
    /*      font-weight: 500;*/
    /*      letter-spacing: 1px;*/
    /*      color: #fefefe;*/
    /*      display: flex;*/
    /*      justify-content: center;*/
    /*      align-items: center;*/
    /*    }*/
    /*  }*/
    /*}*/
    /*.mothCircular{*/
    /*  width: 100%;*/
    /*  display: flex;*/
    /*  justify-content: center;*/
    /*  align-items: center;*/
    /*  margin-bottom: 4rem;*/
    /*  position: relative;*/
    /*  .monthText{*/
    /*    position: absolute;*/
    /*    display: flex;*/
    /*    flex-direction: row;*/
    /*    justify-content: center;*/
    /*    align-items: center;*/
    /*    p{*/
    /*      font-size: 1.66rem;*/
    /*      font-weight: 400;*/
    /*      line-height: 2rem;*/
    /*      letter-spacing: 1px;*/
    /*      color: #999999;*/
    /*      margin: 0;*/
    /*    }*/
    /*    h5{*/
    /*      font-size: 2.33rem;*/
    /*      font-weight: 400;*/
    /*      line-height: 2rem;*/
    /*      letter-spacing: 1px;*/
    /*      color: #333333;*/
    /*    }*/
    /*  }*/
    /*  .monthTextZ{*/
    /*    right: 53rem;*/
    /*    h5{*/
    /*      margin: 0 0 0 2.16rem;*/
    /*    }*/
    /*  }*/
    /*  .monthTextY{*/
    /*    left: 53rem;*/
    /*    h5{*/
    /*      margin: 0 2.16rem 0 0;*/
    /*    }*/
    /*  }*/

    /*  .circularS{*/
    /*    width: 1.33rem;*/
    /*    height: 1.33rem;*/
    /*    border: 0.166rem solid #0067fd;*/
    /*    border-radius: 100%;*/
    /*    display: flex;*/
    /*    justify-content: center;*/
    /*    align-items: center;*/
    /*    span{*/
    /*      width: 0.833rem;*/
    /*      height: 0.833rem;*/
    /*      background-color: #0067fd;*/
    /*      border-radius: 100%;*/
    /*    }*/
    /*  }*/
    /*}*/
    /*.line{*/
    /*  width: .16rem;*/
    /*  height: 120rem;*/
    /*  position: absolute;*/
    /*  background-color: #0067fd;*/
    /*  !*top: 4.83rem;*!*/
    /*  left:0;*/
    /*  right:0;*/
    /*  top:1rem;*/
    /*  bottom:0;*/
    /*  margin:auto;*/
    /*}*/
  }
}
</style>
